<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API文档 - 商品管理系统</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">

    <!-- Bootstrap Icons -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap-icons/1.11.0/font/bootstrap-icons.min.css" rel="stylesheet">
    <style>
        body {
            background: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding-top: 70px; /* 为导航栏留空间 */
        }
        
        /* 导航栏样式 */
        .top-navbar {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1030;
        }

        .top-navbar .navbar-brand {
            font-size: 1.3rem;
            letter-spacing: 0.5px;
            font-weight: 700;
        }

        .top-navbar .nav-link {
            color: rgba(255,255,255,0.85) !important;
            padding: 0.5rem 1rem;
            border-radius: 6px;
            margin: 0 0.2rem;
            transition: all 0.2s;
        }

        .top-navbar .nav-link:hover,
        .top-navbar .nav-link.active {
            background: rgba(255,255,255,0.15);
            color: white !important;
        }

        .sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            width: 280px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 2rem 1rem;
            overflow-y: auto;
        }

        .sidebar-link {
            color: rgba(255,255,255,0.8);
            text-decoration: none;
            padding: 0.75rem 1rem;
            display: block;
            border-radius: 8px;
            transition: all 0.2s;
        }

        .sidebar-link:hover, .sidebar-link.active {
            background: rgba(255,255,255,0.2);
            color: white;
        }

        .main-content {
            margin-left: 280px;
            padding: 2rem;
        }

        .api-card {
            background: white;
            border-radius: 15px;
            padding: 2rem;
            margin-bottom: 2rem;
            box-shadow: 0 5px 15px rgba(0,0,0,0.08);
        }

        .method-badge {
            padding: 0.4rem 1rem;
            border-radius: 20px;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .method-get { background: #10b981; color: white; }
        .method-post { background: #3b82f6; color: white; }
        .method-put { background: #f59e0b; color: white; }
        .method-delete { background: #ef4444; color: white; }

        .code-block {
            background: #1e293b;
            color: #e2e8f0;
            padding: 1.5rem;
            border-radius: 10px;
            overflow-x: auto;
        }

        .param-table {
            font-size: 0.9rem;
        }

        .param-table th {
            background: #f8f9fa;
            font-weight: 600;
        }
    </style>
</head>
<body>

<!-- 顶部导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark top-navbar">
    <div class="container-fluid">
        <a class="navbar-brand fw-bold" href="/dashboard">
            <i class="bi bi-box-seam-fill me-2"></i>商品管理系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link" href="/dashboard">
                        <i class="bi bi-speedometer2"></i> Dashboard
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/product/list">
                        <i class="bi bi-box"></i> 商品管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/category/list">
                        <i class="bi bi-tags"></i> 分类管理
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/log/list">
                        <i class="bi bi-clock-history"></i> 操作日志
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="/doc">
                        <i class="bi bi-book"></i> API文档
                    </a>
                </li>
            </ul>
            <div class="d-flex align-items-center">
                <!-- 用户信息 -->
                <div th:if="${currentUser}" class="me-3 text-white">
                    <small>欢迎,</small>
                    <strong th:text="${currentUser.realName ?: currentUser.username}"></strong>
                </div>
                
                <a href="/product/add" class="btn btn-light btn-sm me-2">
                    <i class="bi bi-plus-circle"></i> 新增商品
                </a>
                <a href="/druid" target="_blank" class="btn btn-outline-light btn-sm me-2">
                    <i class="bi bi-speedometer"></i> 监控
                </a>
                <!-- 登出按钮 -->
                <a href="/auth/logout" class="btn btn-outline-light btn-sm">
                    <i class="bi bi-box-arrow-right"></i> 登出
                </a>
            </div>
        </div>
    </div>
</nav>
<!-- 侧边栏 -->
<div class="sidebar">
    <h4 class="mb-4"><i class="bi bi-book me-2"></i>API文档</h4>
    <div class="mb-4">
        <small class="opacity-75">版本 1.0.0</small>
    </div>
    <a href="#overview" class="sidebar-link active">概述</a>
    <a href="#product-list" class="sidebar-link">查询商品列表</a>
    <a href="#product-get" class="sidebar-link">查询单个商品</a>
    <a href="#product-add" class="sidebar-link">新增商品</a>
    <a href="#product-update" class="sidebar-link">更新商品</a>
    <a href="#product-delete" class="sidebar-link">删除商品</a>
    <a href="#product-batch" class="sidebar-link">批量操作</a>
    <a href="#product-search" class="sidebar-link">搜索商品</a>
    <a href="#statistics" class="sidebar-link">统计数据</a>
    <a href="/dashboard" class="sidebar-link mt-4"><i class="bi bi-house me-2"></i>返回首页</a>
</div>

<!-- 主内容区 -->
<div class="main-content">
    <!-- 概述 -->
    <div id="overview" class="api-card">
        <h2 class="mb-4">商品管理系统 API 文档</h2>
        <p class="lead">本文档提供完整的RESTful API接口说明，用于商品管理系统的前后端交互。</p>

        <h5 class="mt-4">Base URL</h5>
        <div class="code-block">http://localhost:8080</div>

        <h5 class="mt-4">响应格式</h5>
        <p>所有API响应均采用统一的JSON格式：</p>
        <div class="code-block">
            {
            "code": 200,
            "message": "操作成功",
            "data": {...},
            "success": true,
            "timestamp": 1234567890
            }
        </div>

        <h5 class="mt-4">状态码说明</h5>
        <table class="table param-table">
            <thead>
            <tr>
                <th>状态码</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr><td><code>200</code></td><td>请求成功</td></tr>
            <tr><td><code>400</code></td><td>请求参数错误</td></tr>
            <tr><td><code>404</code></td><td>资源不存在</td></tr>
            <tr><td><code>500</code></td><td>服务器内部错误</td></tr>
            </tbody>
        </table>
    </div>

    <!-- 查询商品列表 -->
    <div id="product-list" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-get">GET</span>
            <span class="ms-3">/product/list</span>
        </h3>
        <p>分页查询商品列表，支持关键字搜索、分类筛选、状态筛选和排序。</p>

        <h5 class="mt-4">请求参数</h5>
        <table class="table param-table">
            <thead>
            <tr>
                <th>参数名</th>
                <th>类型</th>
                <th>必填</th>
                <th>说明</th>
                <th>示例</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><code>page</code></td>
                <td>Integer</td>
                <td>否</td>
                <td>当前页码，默认1</td>
                <td>1</td>
            </tr>
            <tr>
                <td><code>size</code></td>
                <td>Integer</td>
                <td>否</td>
                <td>每页条数，默认10</td>
                <td>10</td>
            </tr>
            <tr>
                <td><code>keyword</code></td>
                <td>String</td>
                <td>否</td>
                <td>搜索关键字</td>
                <td>iPhone</td>
            </tr>
            <tr>
                <td><code>categoryId</code></td>
                <td>String</td>
                <td>否</td>
                <td>分类ID</td>
                <td>uuid-123</td>
            </tr>
            <tr>
                <td><code>status</code></td>
                <td>Integer</td>
                <td>否</td>
                <td>状态：1-在售，0-下架，2-缺货</td>
                <td>1</td>
            </tr>
            <tr>
                <td><code>sortBy</code></td>
                <td>String</td>
                <td>否</td>
                <td>排序字段</td>
                <td>created_at</td>
            </tr>
            <tr>
                <td><code>sortOrder</code></td>
                <td>String</td>
                <td>否</td>
                <td>排序方式：ASC/DESC</td>
                <td>DESC</td>
            </tr>
            </tbody>
        </table>

        <h5 class="mt-4">请求示例</h5>
        <div class="code-block">
            GET /product/list?page=1&size=10&keyword=iPhone&status=1
        </div>
    </div>

    <!-- 查询单个商品 -->
    <div id="product-get" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-get">GET</span>
            <span class="ms-3">/product/get/{id}</span>
        </h3>
        <p>根据商品ID查询商品详细信息。</p>

        <h5 class="mt-4">路径参数</h5>
        <table class="table param-table">
            <thead>
            <tr>
                <th>参数名</th>
                <th>类型</th>
                <th>必填</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><code>id</code></td>
                <td>String</td>
                <td>是</td>
                <td>商品ID</td>
            </tr>
            </tbody>
        </table>

        <h5 class="mt-4">响应示例</h5>
        <div class="code-block">
            {
            "code": 200,
            "message": "操作成功",
            "data": {
            "id": "uuid-123",
            "productName": "iPhone 15 Pro",
            "productCode": "IP15P-001",
            "categoryId": "uuid-cat-1",
            "categoryName": "电子产品",
            "brand": "Apple",
            "salePrice": 9999.00,
            "stockQuantity": 50,
            "status": 1,
            ...
            },
            "success": true
            }
        </div>
    </div>

    <!-- 新增商品 -->
    <div id="product-add" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-post">POST</span>
            <span class="ms-3">/product/save</span>
        </h3>
        <p>新增商品信息。ID为空时执行新增操作。</p>

        <h5 class="mt-4">请求体（JSON）</h5>
        <div class="code-block">
            {
            "productName": "iPhone 15 Pro",
            "productCode": "IP15P-001",
            "categoryId": "uuid-cat-1",
            "brand": "Apple",
            "specification": "256GB",
            "unit": "台",
            "purchasePrice": 7999.00,
            "salePrice": 9999.00,
            "stockQuantity": 50,
            "minStock": 10,
            "maxStock": 1000,
            "imageUrl": "https://example.com/image.jpg",
            "description": "商品描述",
            "status": 1,
            "isHot": 1,
            "isNew": 1
            }
        </div>

        <h5 class="mt-4">必填字段</h5>
        <ul>
            <li><code>productName</code> - 商品名称</li>
            <li><code>productCode</code> - 商品编码（唯一）</li>
            <li><code>categoryId</code> - 分类ID</li>
            <li><code>salePrice</code> - 销售价</li>
        </ul>
    </div>

    <!-- 更新商品 -->
    <div id="product-update" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-post">POST</span>
            <span class="ms-3">/product/save</span>
        </h3>
        <p>更新商品信息。提供ID字段时执行更新操作。</p>

        <h5 class="mt-4">请求体（JSON）</h5>
        <div class="code-block">
            {
            "id": "uuid-123",
            "productName": "iPhone 15 Pro Max",
            "salePrice": 10999.00,
            "stockQuantity": 45,
            ...
            }
        </div>
    </div>

    <!-- 删除商品 -->
    <div id="product-delete" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-delete">DELETE</span>
            <span class="ms-3">/product/delete/{id}</span>
        </h3>
        <p>根据ID删除商品。</p>

        <h5 class="mt-4">路径参数</h5>
        <table class="table param-table">
            <thead>
            <tr>
                <th>参数名</th>
                <th>类型</th>
                <th>必填</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><code>id</code></td>
                <td>String</td>
                <td>是</td>
                <td>商品ID</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 批量操作 -->
    <div id="product-batch" class="api-card">
        <h3 class="mb-3">批量操作接口</h3>

        <h5>批量删除</h5>
        <p>
            <span class="method-badge method-delete">DELETE</span>
            <code class="ms-2">/product/batchDelete</code>
        </p>
        <div class="code-block">
            {
            "ids": ["uuid-1", "uuid-2", "uuid-3"]
            }
        </div>

        <h5 class="mt-4">批量更新状态</h5>
        <p>
            <span class="method-badge method-put">PUT</span>
            <code class="ms-2">/product/batchUpdateStatus</code>
        </p>
        <div class="code-block">
            {
            "ids": ["uuid-1", "uuid-2"],
            "status": 1
            }
        </div>
    </div>

    <!-- 搜索商品 -->
    <div id="product-search" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-get">GET</span>
            <span class="ms-3">/product/search</span>
        </h3>
        <p>多字段模糊搜索商品，支持搜索商品名称、编码、品牌、描述、分类等。</p>

        <h5 class="mt-4">请求参数</h5>
        <table class="table param-table">
            <thead>
            <tr>
                <th>参数名</th>
                <th>类型</th>
                <th>必填</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><code>keyword</code></td>
                <td>String</td>
                <td>是</td>
                <td>搜索关键字</td>
            </tr>
            <tr>
                <td><code>page</code></td>
                <td>Integer</td>
                <td>否</td>
                <td>页码，默认1</td>
            </tr>
            <tr>
                <td><code>size</code></td>
                <td>Integer</td>
                <td>否</td>
                <td>每页条数，默认10</td>
            </tr>
            </tbody>
        </table>
    </div>

    <!-- 统计数据 -->
    <div id="statistics" class="api-card">
        <h3 class="mb-3">
            <span class="method-badge method-get">GET</span>
            <span class="ms-3">/dashboard/statistics</span>
        </h3>
        <p>获取系统统计数据，包括商品总数、总库存、总销量、库存预警等信息。</p>

        <h5 class="mt-4">响应示例</h5>
        <div class="code-block">
            {
            "code": 200,
            "data": {
            "totalProducts": 100,
            "totalStock": 5000,
            "totalSales": 1234,
            "totalValue": 500000.00,
            "lowStockCount": 5,
            "categoryStats": [
            {
            "category_name": "电子产品",
            "productCount": 50,
            "stockCount": 2000
            },
            ...
            ]
            },
            "success": true
            }
        </div>
    </div>

    <!-- 其他接口 -->
    <div class="api-card">
        <h3 class="mb-3">其他接口</h3>

        <table class="table">
            <thead>
            <tr>
                <th>方法</th>
                <th>接口</th>
                <th>说明</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td><span class="method-badge method-get">GET</span></td>
                <td><code>/product/hot?limit=10</code></td>
                <td>获取热销商品</td>
            </tr>
            <tr>
                <td><span class="method-badge method-get">GET</span></td>
                <td><code>/product/new?limit=10</code></td>
                <td>获取新品商品</td>
            </tr>
            <tr>
                <td><span class="method-badge method-get">GET</span></td>
                <td><code>/product/lowStock</code></td>
                <td>获取库存预警商品</td>
            </tr>
            <tr>
                <td><span class="method-badge method-put">PUT</span></td>
                <td><code>/product/updateStock</code></td>
                <td>更新库存（增加或减少）</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 导航栏跟随内容突出显示
    document.addEventListener('DOMContentLoaded', function() {
        // 获取所有导航链接和对应的内容区域
        const sidebarLinks = document.querySelectorAll('.sidebar-link[href^="#"]');
        const contentSections = document.querySelectorAll('.api-card[id]');
        
        // 使用节流函数优化滚动性能
        function throttle(func, limit) {
            let inThrottle;
            return function() {
                const args = arguments;
                const context = this;
                if (!inThrottle) {
                    func.apply(context, args);
                    inThrottle = true;
                    setTimeout(() => inThrottle = false, limit);
                }
            }
        }
        
        // 滚动事件处理
        function handleScroll() {
            let current = '';
            const scrollPosition = window.scrollY + 80; // 减小偏移量，提高响应速度
            
            // 使用更高效的查找方式
            for (let i = 0; i < contentSections.length; i++) {
                const section = contentSections[i];
                const sectionTop = section.offsetTop;
                const sectionHeight = section.offsetHeight;
                
                if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
                    current = section.getAttribute('id');
                    break; // 找到后立即退出循环
                }
            }
            
            // 优化DOM操作，只在需要时更新
            sidebarLinks.forEach(link => {
                const isActive = link.getAttribute('href') === '#' + current;
                if (isActive && !link.classList.contains('active')) {
                    // 先移除所有active类
                    sidebarLinks.forEach(l => l.classList.remove('active'));
                    // 再添加到当前链接
                    link.classList.add('active');
                }
            });
        }
        
        // 点击导航链接平滑滚动到对应内容
        sidebarLinks.forEach(link => {
            link.addEventListener('click', function(e) {
                e.preventDefault();
                const targetId = this.getAttribute('href').substring(1);
                const targetSection = document.getElementById(targetId);
                
                if (targetSection) {
                    // 立即更新高亮，不等待滚动事件
                    sidebarLinks.forEach(l => l.classList.remove('active'));
                    this.classList.add('active');
                    
                    window.scrollTo({
                        top: targetSection.offsetTop - 50,
                        behavior: 'smooth'
                    });
                }
            });
        });
        
        // 使用节流函数监听滚动事件，提高性能
        window.addEventListener('scroll', throttle(handleScroll, 50));
        
        // 初始化时执行一次
        handleScroll();
    });
</script>
</body>
</html>